{% extends "base/base.html" %}

{% comment %}

 Copyright 2013 - Tom Alessi

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and 
 limitations under the License.

{% endcomment %}

{% block content %}


<form enctype="multipart/form-data" method="POST" action="/ireport">
{% csrf_token %}

  <div class="row">
    <div class="large-12 columns">
      <h1>Report an Incident or Service Disruption</h1>
      <p>{{instructions|safe}}</p>
    </div>
  </div>

  {# This is a row consisting of 12 columns that will display all messages passed in the request #}
  {% include "admin/messages.html" %}

  <div class="row">
    <div class="large-8 columns">
      <span class="radius secondary label">Contact Information</span><br>
        <div class="sublabel_container"><span class="sublabel">Please enter your full name and email address.  This information is required in case we need to contact you about the issue you are experiencing.</span></div>
    </div>
  </div>

  <div class="spacer_small"></div>

  <div class="row">
    <div class="large-8 columns">
      <div class="row">
        <div class="large-6 columns {% if form.name.errors %}error{% endif %}">
          <label>Your Full Name:<div class="input_container"><input type="text" name="name" placeholder="Enter your full name" maxlength="50" value="{% if not form.name.data == None %}{{form.name.data}}{% endif %}" /></div></label>
          {% if form.name.errors %}
          <span class="err">{% for error in form.name.errors %}{{error}}<br>{% endfor %}<br></span>
          {% endif %}
        </div>
        <div class="large-6 columns left {% if form.email.errors %}error{% endif %}">
          <label>Your Email Address:<div class="input_container"><input type="text" name="email" placeholder="Enter your email address" maxlength="50" value="{% if not form.email.data == None %}{{form.email.data}}{% endif %}" /></div></label>
          {% if form.email.errors %}
          <span class="err">{% for error in form.email.errors %}{{error}}<br>{% endfor %}<br></span>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="spacer_medium"></div>

  <div class="row">
    <div class="large-8 columns">
      <span class="radius secondary label">Incident Description</span><br>
        <div class="sublabel_container">
          <span class="sublabel">Enter a full description of the issue you are currently experiencing.  Please include all information that would be useful in troubleshooting this issue.  If you need more room to enter information, please use the extended description entry field below.
          </span>
        </div>
    </div>
  </div>

  <div class="spacer_small"></div>

  <div class="row">
    <div class="large-8 columns {% if form.detail.errors %}error{% endif %}">
      <label>Brief Description:
        &nbsp;<span id="detail_counter" class="counter"></span>
      </label>
      <div class="input_container"><textarea id="detail" name="detail" class="ireport_desc" placeholder="Enter a description of the issue you are experiencing.  Input is limited to 160 characters." maxlength="160">{% if not form.detail.data == None %}{{form.detail.data}}{% endif %}</textarea></div>
      {% if form.detail.errors %}
      <span class="err">{% for error in form.detail.errors %}{{error}}<br>{% endfor %}</br></span>
      {% endif %}
    </div>
  </div>

  <div class="spacer_small"></div>

  <div class="row">
    <div class="large-8 columns {% if form.extra.errors %}error{% endif %}">
      <label>Extended Description:
        &nbsp;<span id="extra_counter" class="counter"></span>      
      </label>
      <div class="input_container"><textarea id="extra" name="extra" placeholder="Enter any additional information, beyond 160 characters, that you would like to report about this incident." maxlength="1000">{% if not form.extra.data == None %}{{form.extra.data}}{% endif %}</textarea></div>
      {% if form.extra.errors %}
      <span class="err">{% for error in form.extra.errors %}{{error}}<br>{% endfor %}<br></span>
      {% endif %}
    </div>
  </div>

  {# Only show the upload fields if this functionality is enabled #}
  {% if enable_uploads %}

  <div class="spacer_medium"></div>

  <div class="row">
    <div class="large-8 columns">
      <span class="radius secondary label">Screenshots</span><br><br>
    </div>
  </div>

  <div class="row">
    <div class="large-8 columns">
      <div class="row">
        <div class="large-4 columns {% if form.screenshot1.errors %}error{% endif %}">
          {{form.screenshot1}}
          {% if form.screenshot1.errors %}
          <span class="err">{% for error in form.screenshot1.errors %}{{error}}<br>{% endfor %}<br></span>
          {% endif %}
        </div>
        <div class="large-4 columns left {% if form.screenshot2.errors %}error{% endif %}">
          {{form.screenshot2}}
          {% if form.screenshot2.errors %}
          <span class="err">{% for error in form.screenshot2.errors %}{{error}}<br>{% endfor %}<br></span>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  {% endif %}

  <div class="spacer_small"></div>

  <div class="row">
    <div class="large-8 columns">
      <input type="submit" class="small button" value="submit"/>
    </div>
  </div>

</form>


<script>
  // Textarea counters
  $("#detail").keyup(function(){
    $("#detail_counter").text("Characters remaining: " + (160 - $(this).val().length));
  });

  $("#extra").keyup(function(){
    $("#extra_counter").text("Characters remaining: " + (1000 - $(this).val().length));
  });
</script>


{% endblock %}



